<template>
  <div class="empInfo">
      <el-row type="flex">
        <el-col :span="3"></el-col>
        <el-col :span="3">
          <div>{{empInfoFrom.name}} / {{dict_gender[empInfoFrom.genderId]}} / {{empInfoFrom.birthday}}</div>
          <div>{{empInfoFrom.idNo}}</div>
          <div style="margin-top: 10px;">
            <span>点击更换照片</span>
            <el-upload
              class="upload-demo"
              drag
              action="/person/personDetail"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="beforeAvatarUpload">
              <img v-if="empInfoFrom.photo" :src="empInfoFrom.photo" class="avatar">
              <i v-else class="el-icon-upload"></i>
              <div class="el-upload__text">将照片拖到此处<br>或<em>点击上传</em></div>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="6"></el-col>
        <el-col :span="7">
          <el-form inline-message ref="insertFrom" :model="empInfoFrom" label-width="150px">
            <el-form-item label="工作类型(专职)">
              <el-select v-model="empInfoFrom.empTypeId" filterable clearable style="width: 100%;" placeholder="请选择">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_emp_type" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工作类型(兼职)">
              <el-row>
                <el-col :span="18">
                  <el-select v-model="empInfoFrom.empPluralityTypeId" style="width: 100%;" multiple filterable clearable collapse-tags placeholder="请选择">
                    <el-option :label="item" :value="key" v-for="(item,key,index) in dict_emp_type" :key="index"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-button type="success" @click="empInfoFrom.empPluralityTypeId = Object.keys(dict_emp_type)">全选</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="运动主项">
              <el-select v-model="empInfoFrom.sportId" filterable clearable @change="sportChange" style="width: 100%;" placeholder="请选择">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_sport" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运动小项">
              <el-select v-model="empInfoFrom.sportItemId" filterable clearable style="width: 100%;" placeholder="请选择">
                <el-option :label="item.name" :value="item.sportItemId" v-for="(item,index) in sportItemData" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="success" size="small" icon="iconfont icon-save" style="float: right;" @click="save"> 保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="3"></el-col>
      </el-row>
      <div style="width: 100%;text-align: right;">
        <el-button type="success" :icon="!printLoading?'el-icon-printer':'vxe-icon--refresh roll'" size="medium" @click="printEvent"> 打印</el-button>
      </div>
      <div style="visibility: hidden;overflow: hidden;height: 10px;">
        <empDetailPrint ref="empDetailPrint" :detailData="detailData" />
      </div>
  </div>
</template>

<script>
  import { getEmpRoughly,emp_by_pid_insert,getDetail } from '@/api/person.js'
  import { sport_item_by_sportId } from '@/api/person.js'
  import { employee_type,sport_by_org,sport_item } from '@/api/dict.js'
  import empDetailPrint from '@/components/print/empDetailPrint.vue'
  export default{
    components: {empDetailPrint},
    props:['pId'],
    data() {
      return {
        dict_gender: {1:'男',2:'女'},
        imageUrl: '',
        imageBase64: '',
        empInfoFrom: {
          name: '',
          birthday: '',
          genderId: '',
          photo: '',
          empTypeId: '',
          empPluralityTypeId: '',
          sportId: '',
          sportItemId: '',
        },
        dict_emp_type: {},
        dict_sport: {},
        dict_sport_item: {},
        sportItemData: [],
        printTopData: [],
        detailData: {},
        printLoading: false,
      }
    },
    created() {
      this.init_dict()
      this.getEmpRoughly()
    },
    methods: {
      printEvent() {
        this.printLoading = true
        this.printTopData = ['emp_basic','emp_detail','family','emp_languageLevel','emp_workExp','education','emp_paper','emp_referee','emp_rewordPunishment','emp_furtherEdu']
        let data = {
          pId: this.pId,
          data: {personInfoPrintSpec: this.printTopData.join(',')}
        }
        getDetail(data).then(res=>{
          if(res.code === 200) {
            this.detailData = res.data
            setTimeout(()=>{
              this.$refs.empDetailPrint.tablePrint()
              this.printLoading = false
            },3000)
          }
        })
      },
      sportChange() {
        this.empInfoFrom.sportItemId = ''
        sport_item_by_sportId({sportId:this.empInfoFrom.sportId}).then(res=>{
          if(res.code === 200) {
            this.sportItemData = res.data
          }
        })
      },
      save(){
        let data = {
          name: this.empInfoFrom.name,
          genderId: this.empInfoFrom.genderId,
          birthday: this.$moment(this.empInfoFrom.birthday).format('YYYY-MM-DD')+' 00:00:00',
        }
        if (this.empInfoFrom.sportId != '') data.sportId = this.empInfoFrom.sportId
        if (this.empInfoFrom.empTypeId != '') data.empTypeId = this.empInfoFrom.empTypeId
        if (this.empInfoFrom.empPluralityTypeId != '') data.empPluralityTypeIdStr = this.empInfoFrom.empPluralityTypeId.join(',')
        if (this.empInfoFrom.sportItemId != '') data.sportItemId = this.empInfoFrom.sportItemId
        if (this.imageBase64 != '') data.photo = this.imageBase64

        emp_by_pid_insert({pId:this.pId,data:data}).then(res=>{
          if(res.code === 200) {
            this.$message.success('保存成功！')
          }
        })
      },
      init_dict() {
        employee_type().then(res=>{
          this.dict_emp_type = res
        })
        sport_by_org().then(res=>{
          this.dict_sport = res
        })
        sport_item().then(res=>{
          this.dict_sport_item = res
        })
      },
      getEmpRoughly() {
        getEmpRoughly(this.pId).then(res=>{
          if(res.code === 200) {
            this.empInfoFrom.name = res.data.name
            this.empInfoFrom.genderId = res.data.genderId
            this.empInfoFrom.gender = this.dict_gender[res.data.genderId]
            this.empInfoFrom.birthday = this.$moment(res.data.birthday).format('YYYY-MM-DD')
            this.empInfoFrom.photo = res.data.photo
            this.empInfoFrom.idNo = res.data.idNo
            this.empInfoFrom.empTypeId = res.data.empTypeId?res.data.empTypeId+'':''
            this.empInfoFrom.empType = this.dict_emp_type[res.data.empTypeId]
            this.empInfoFrom.empPluralityTypeId = res.data.empTypeIdStr? res.data.empTypeIdStr.split(',') : ''
            this.empInfoFrom.sportId = res.data.sportId? res.data.sportId+'':''
            this.empInfoFrom.sport = this.dict_sport[res.data.sportId]
            this.sportChange()
            this.empInfoFrom.sportItemId = res.data.sportItemId? res.data.sportItemId:''
            this.empInfoFrom.sportItem = this.dict_sport_item[res.data.sportItemId]
            this.$emit('empInfoDataPrint',this.empInfoFrom)
          }
        })
      },
      beforeAvatarUpload(file) {
        const isJPG = file.raw.type === 'image/png' || file.raw.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像只能是jpg/png格式!');
        }else if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }else{
          this.imageUrl = URL.createObjectURL(file.raw);
          this.getBase64(file.raw).then(res=>{
            this.imageBase64 = res
            this.empInfoFrom.photo = res
          }).then(()=>{
            this.save()
          })
        }
      },
      getBase64(file) {
        return new Promise(function(resolve, reject) {
          let reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function() {
            imgResult = reader.result;
          };
          reader.onerror = function(error) {
            reject(error);
          };
          reader.onloadend = function() {
            resolve(imgResult);
          };
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  .empInfo{

    .upload-demo{
      width: 150px;
      height: 210px;

    }
  }
  .el-upload-dragger{
    width: 150px;
    height: 210px;
  }
</style>
